<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="lib/core/Utility/LBUtility.js"type="text/javascript"></script>
<script src="lib/org/Frame/Frame.js"type="text/javascript"></script>
<script src="lib/org/Screen/Screen.js"type="text/javascript"></script>
<title>渲染引擎测试</title>
<style type="text/css">
/* 屏幕canvas样式 */
.screen{
	border:solid #000 1px;
}
/* 左右分两栏样式 */
.left_splite_2{
	float:left;	
}
.left_splite_2 div{
	width:50%;
	float:left;
}
footer{
	clear:both;
}
</style>
</head>
<header>
<h1>渲染引擎测试</h1>
</header>
<body>
<h2>Frame:</h2>
<div>Frame:<span id="frame">-</span></div>
<div>Status:<span id="status">-</span></div>
<div>FPS:<span id="fps">-</span></div>
<button id="action_start">start</button>
<button id="action_pause">pause</button>
<button id="action_resume">resume</button>
<button id="action_stop">stop</button>
<button id="action_fps_add">FPS +</button>
<button id="action_fps_sub">FPS -</button>
<div>
<h2>screen:</h2>
<div class="left_splite_2" style="width:500px">
    <div>
        <span id="screen"></span>
    </div>
    <div>
        <button id="action_clear">clear</button>
        <br />
        <button id="action_draw">draw</button>
        <br />
        <button id="action_animate">animate</button>
        <br />
        <button id="action_animate_stop">animate stop</button>
    </div>
</div>
</div>
<script type="text/javascript">
document.getElementsByTagName('body')[0].onload	= function () {
	LBUtility.getInstance().ready(function () {
		
		Frame.initailize();
		
		var	scrn	= new	Screen({
			"width"		: 50,
			"height"	: 80,
			"scale"		: 5,
			"holder"	: document.getElementById("screen")
		});
		scrn.getCanvasElement().className	= 'screen';
		var	bgRender	= new LBRenderImage({
			"src"			: 'assets/earth.jpg',
			"sourceWidth"	: scrn.getRealWidth(),
			"sourceHeight"	: scrn.getRealHeight(),
			"displayWidth"	: scrn.getRealWidth(),
			"displayHeight"	: scrn.getRealHeight()
		});
		var	nyancat		= new LBRenderImage({
			"src"			: 'assets/nyan-cat-small.gif',
			"sourceWidth"	: -1,
			"sourceHeight"	: -1,
			"displayWidth"	: -1,
			"displayHeight"	: -1
		});
		scrn.getRender().appendLayer(bgRender);
		scrn.getRender().appendLayer(nyancat);
		scrn.getRender().draw();
		var	animateEngin	= new Frame({
			"FPS"	: 48
		});
		var	deltaXbg	= 1;
		var	deltaYbg	= 1;
		var	deltaXcat	= 1;
		var	deltaYcat	= 1;
		animateEngin.addEventListener(
			'frame.enterFrame',
			function (event) {
	
				deltaXbg	= bgRender._sourceX + deltaXbg > 0 && bgRender._sourceX + deltaXbg < (bgRender.getImage().width - scrn.getRealWidth())
							? deltaXbg
							: 0 - deltaXbg;
				deltaYbg	= bgRender._sourceY + deltaYbg > 0 && bgRender._sourceY + deltaYbg < (bgRender.getImage().height - scrn.getRealHeight())
							? deltaYbg
							: 0 - deltaYbg;
				deltaXcat	= nyancat._positionX + deltaXcat > 0 && nyancat._positionX + deltaXcat < (scrn.getRealWidth() - nyancat.getImage().width)
							? deltaXcat
							: 0 - deltaXcat;
				deltaYcat	= nyancat._positionY + deltaXcat > 0 && nyancat._positionY + deltaXcat < (scrn.getRealHeight() - nyancat.getImage().height)
							? deltaYcat
							: 0 - deltaYcat;
	
				bgRender.setConfig({
					"sourceX"	: bgRender._sourceX + deltaXbg,
					"sourceY"	: bgRender._sourceY + deltaYbg
				});
				nyancat.setPosition(deltaXcat, deltaYcat);
				scrn.clear();
				scrn.getRender().draw();
			}
		);
		document.getElementById('action_clear').onclick	= function () {
			scrn.clear();
		}
		document.getElementById('action_draw').onclick	= function () {
			bgRender.setConfig({
				"sourceX"		: 0,
				"sourceY"		: 0
			});
			scrn.getRender().draw();
		}
		document.getElementById('action_animate').onclick	= function () {
			animateEngin.start();
		}
		document.getElementById('action_animate_stop').onclick	= function () {
			
			animateEngin.stop();
		}
	});
}
</script>
</body>
<footer>
sanders.yao@gmail.com
</footer>
</html>